<template>
  <div>
    <!-- 省 -->
    <a-select v-model="info.province" size="large" style="width: 32%" @change="changeProvince">
      <a-select-option value="">省份</a-select-option>
      <a-select-option
        :value="item.provinceCode"
        v-for="(item, index) in provinceList"
        :key="index"
      >{{ item.provinceName }}</a-select-option
      >
    </a-select>
    <!-- 市 -->
    <a-select v-model="info.city" size="large" style="width: 32%; margin-left: 1%" @change="changeCity" v-if="level >= 2">
      <a-select-option value="">城市</a-select-option>
      <a-select-option
        :value="item.cityCode"
        v-for="(item, index) in cityList"
        :key="index"
      >{{ item.cityName }}</a-select-option
      >
    </a-select>
    <!-- 区 -->
    <a-select v-model="info.area" size="large" style="width: 32%; margin-left: 1%" @change="changeArea" v-if="level == 3">
      <a-select-option value="">地区</a-select-option>
      <a-select-option :value="item.areaCode" v-for="(item, index) in areaList" :key="index">{{
        item.areaName
      }}</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'RegionIndex',
  props: {
    regionInfo: {
      type: Object,
      default: () => {}
    },
    // 省市区 1:省 2:省市 3:省市区
    level: {
      type: Number,
      default: 2
    }
  },
  data () {
    return {
      provinceList: [], // 省
      cityList: [], // 市
      areaList: [], // 区
      info: {} // 省市区信息
    }
  },
  created () {
    this.provinceList = this.getProvinceData()
  },
  mounted () {
    this.init()
  },
  methods: {
    init() {
      this.info = this.regionInfo
      if (this.regionInfo.province && this.level >= 2) {
        this.getCityData(this.regionInfo.province)
      }
      if (this.regionInfo.city && this.level === 3) {
        this.getAreaData(this.regionInfo.city)
      }
    },
    // 获取省
    getProvinceData () {
      this.$common.handlePost('/common/province', {})
      .then((res) => {
        if (res.code === 200) {
          this.provinceList = res.data
        }
      })
    },
    // 获取市
    getCityData (code) {
      this.$common.handlePost('/common/cities/' + code, {})
      .then((res) => {
        if (res.code === 200) {
          this.cityList = res.data
        }
      })
    },
    // 获取区
    getAreaData (code) {
      this.$common.handlePost('/common/areas/' + code, {})
        .then((data) => {
          if (data.code === 200) {
            this.areaList = data.result
          }
        })
    },
    // 省获取市 - 切换省
    changeProvince(code) {
      const province = code
      this.cityList = []
      this.areaList = []
      if (code > 0) {
        this.getCityData(code)
      }
      this.$emit('changeRegion', { province, city: '', area: '' })
    },
    // 切换城市
    changeCity(code) {
      const city = code
      this.areaList = []
      if (code > 0) {
        this.getAreaData(code)
      }
      this.$emit('changeRegion', { province: this.info.province, city, area: '' })
    },
    // 切换区
    changeArea(area) {
      this.$emit('changeRegion', { province: this.info.province, city: this.info.city, area })
    }
  },
  watch: {
    regionInfo (val) {
      this.info = val
      if (val.province && this.level >= 2) {
        this.getCityData(val.province)
      }
      if (val.city && this.level === 3) {
        this.getAreaData(val.city)
      }
    }
  }
}
</script>
